<script setup lang="ts">
  import { ref } from 'vue'
import {http} from '@/utlis/http.ts'
 
</script>
<template >
  <view class="box">
  <view class="user-info">
    <image class="u-img"   src="/static/logo.png"></image>
    <view class="u-text">
      <view class="username">{{userName}}</view>
      <view class="small-text">
        昵称{{userName}}
      </view>
      <view class="small-text">
        2019-09-10 14:30{{userName}}
      </view>
    </view>

  </view>
  <view class="u-comment">她说月嫂是个有着特殊的意义职业，于她而言既是工作也是生活，她的言行举止里，藏着孩子的未来，所以她揣着一颗真诚善良的心，不断提升自己的专业护理技能和服务质量；她制做的月子餐点有效地结合了营养学，甜进每一个客户的心里，她是年轻月嫂中翘楚。</view>
  <view class="c-img">
    <image class="cc-img" @click="prlimg"  src="/static/logo.png"></image>
    <image class="cc-img" @click="prlimg"  src="/static/logo.png"></image>
    <image class="cc-img" @click="prlimg"  src="/static/logo.png"></image>
    <image class="cc-img" @click="prlimg"  src="/static/logo.png"></image>
  </view>

  </view>
</template>



<style lang="scss" >
  .box{
   width: 100%;
   display: flex;
  flex-direction: column;
		align-items: center;
    position: absolute;
    border-top: 3rpx solid #b7b4b4;

  }
  .user-info {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0rpx 0rpx 0rpx 60rpx;
		background-image: linear-gradient(135deg, #dfe5e7 10%, #dfe1e2); 
		position: relative;

		.u-img {
			width: 75rpx;
			height: 75rpx;
			border-radius: 50%;
			border: 2rpx solid #FFFFFF;
		}

		.u-text {
			flex: 1;
      width: 100%;
			color: #020202;
			padding: 16rpx 25rpx;
		}

		.username {
			font-weight: bolder;
			font-family: 黑体;
		}

		.small-text {
			font-size: 24rpx;
			padding-top: 10rpx;
		}

	
	}
  .u-comment{
    font-size: 31rpx;
    width: 92%;
    padding: 0rpx 20rpx 20rpx 20rpx;
    margin-left: 30rpx;
    margin-right: 30rpx;
    letter-spacing: 0.07em;
    
  }
  .c-img{
    margin-left: 0rpx;
    margin-right: 10rpx;
    flex: 1;
    padding: 0rpx 0rpx 0rpx 30rpx;
    .cc-img{
      width: 220rpx;
			height: 220rpx;
			
			border: 2rpx solid #b7b4b4;
    }
  }
</style>